<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
	.big-box{
		width: 580px;
		
	}
	.sm-box{
		width: 60px;
		height: 60px;
		background-color: skyblue;
		margin: 2px;
		float: left;
		border-radius: 50%;
		border:2px green solid;
		text-align: center;
		line-height: 60px;
		color: white
	}
	.img-in{
		width: 100px;
		height: 100px;
		float: left;
	}
	</style>
<body>
	<div class="big-box">
		<div class="sm-box">前</div>
		<div class="sm-box">前</div>
		<div class="sm-box">前</div>
		<div class="sm-box">前</div>
		<div class="sm-box">前</div>
		<div class="sm-box">前</div>
		<div class="sm-box">前</div>
		<div class="sm-box">前</div>
		<div class="img-in">
			<img src="img/xx1.png" alt="" width="100%">
		</div>
		<div class="sm-box">后</div>
		<div class="sm-box">后</div>
		<div class="sm-box">后</div>
		<div class="sm-box">后</div>
		<div class="sm-box">后</div>
		<div class="sm-box">后</div>
		<div class="sm-box">后</div>
		<div class="sm-box">后</div>
		<div class="sm-box">后</div>
		<div class="sm-box">后</div>
		<div class="sm-box">后</div>
		<div class="sm-box">后</div>
		<div class="sm-box">后</div>
		<div class="sm-box">后</div>
		<div class="sm-box">后</div>
		<div class="sm-box">后</div>
		<div class="sm-box">后</div>
		<div class="sm-box">后</div>
		<div class="sm-box">后</div>
		<div class="sm-box">后</div>
		<div class="sm-box">后</div>
		<div class="sm-box">后</div>
	</div>
</body>
</html>
